<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人所得税计算器</title>
		<style>
			*{
				box-sizing: border-box;
			}
			body{
				margin: 0;
			}
			header{
				height: 44px;
				background-color: #337ab7;
				text-align: center;
				line-height: 44px;
				color: white;
			}
			#container{
				width: 80%;
				margin: 0 auto;
			}
			#income{
				margin-top: 16px;
				width: 100%;
				border: solid 1px grey;
				border-radius: 5px;
				height: 40px;
				padding-left: 10px;
			}
			#calc-btn{
				margin-top: 16px;
				width: 100%;
				border: solid 1px grey;
				border-radius: 5px;
				height: 40px;
				font-size: 16px;
				color: white;
				background-color: #337ab7;
			}
			
			#r-list dt{
				float: left;
				margin: 8px 0;
			}
			
			#r-list dd{
				float: right;
				margin: 8px 0;
			}
			
			.clearfix:after{
				content: "";
				display: block;
				clear: both;
			}
			
			#r-list dt input{
				width: 20px;
			}
			
			input{
				outline: 0;
			}
			
		</style>
	</head>
	<body ng-app="myapp">
		<div ng-controller="calc" >
			<header>个税计算器</header>
			<div id="container">
				<input id="income" type="text" placeholder="总收入" ng-model="income"/>
				
				<dl class="clearfix" id="r-list" ng-show="income>=1600">
					<dt>养老<input type="text" value="0" id="yal" ng-model="yanglao">%</dt>
					<dd id="yanglao">{{income*yanglao/100|number:2}}</dd>
					<div class="clearfix"></div>
					<dt>医疗<input type="text" value="0" id="yl" ng-model="yiliao">%</dt>
					<dd id="yiliao">{{income*yiliao/100|number:2}}</dd>
					<div class="clearfix"></div>
					<dt>失业<input type="text" value="0" id="sy" ng-model="shiye">%</dt>
					<dd id="shiye">{{income*shiye/100|number:2}}</dd>
					<div class="clearfix"></div>
					<dt>公积金<input type="text" value="0" id="gjj" ng-model="gjj">%</dt>
					<dd id="gongjijin">{{income*gjj/100|number:2}}</dd>
					<div class="clearfix"></div>
					<dt>税前工资</dt>
					<dd id="shuiqiangongzi">{{shuiqiangongzi()|number:2}}</dd>
					<div class="clearfix"></div>
					<dt>个人所得税</dt>
					<dd id="suodeshui">{{suodeshui()|number:2}}</dd>
					<div class="clearfix"></div>
					<hr />
					<dt>税后工资</dt>
					<dd id="shuihougongzi">{{shuiqiangongzi()-suodeshui()|number:2}}</dd>
				</dl>
				
			</div>
		</div>
		
	</body>
	<script src="angular.js"></script>
	<script>
		var app = angular.module("myapp",[]);

		
		app.controller("calc",function($scope){
			$scope.income=0;
			$scope.yanglao=8;
			$scope.yiliao=2;
			$scope.shiye=0.3;
			$scope.gjj=8;
			$scope.shuiqiangongzi=function(){
				return this.income*(100-this.yanglao-this.yiliao-this.shiye-this.gjj)/100;
			};
			$scope.suodeshui=function(){
				var jishuigongzi = this.shuiqiangongzi()-3500;
				if(jishuigongzi<=0){
					return this.sds=0;
				}else{
					//需要缴税
					if(jishuigongzi<=1500){
						return jishuigongzi*0.03;
					}else if(jishuigongzi<=4500){
						return jishuigongzi*0.1-105;
					}else if(jishuigongzi<=9000){
						return jishuigongzi*0.2-555;
					}else if(jishuigongzi<=35000){
						return jishuigongzi*0.25-1005;
					}else if(jishuigongzi<=55000){
						return jishuigongzi*0.3-2775;
					}else if(jishuigongzi<=80000){
						return jishuigongzi*0.35-5505;
					}else{
						return jishuigongzi*0.45-13505;
					}
				}

			}
		})
		
		
//		$("input").on("input",function(){
//			var zonggongzi = $("#income").val()*1;
//			if(Number.isNaN(zonggongzi)){
//				return;
//			}
//			if(zonggongzi<1600){
//				return;
//			}
//			
//			var yal = $("#yal").val()/100;
//			var yl = $("#yl").val()/100;
//			var sy = $("#sy").val()/100;
//			var gjj = $("#gjj").val()/100;
//			
//			var r = calcTax(zonggongzi,yal,yl,sy,gjj);
//			
//			$("#yanglao").text(r.yanglao);
//			$("#yiliao").text(r.yiliao);
//			$("#shiye").text(r.shiye);
//			$("#gongjijin").text(r.gongjijin);
//			$("#shuiqiangongzi").text(r.shuiqiangongzi);
//			$("#suodeshui").text(r.suodeshui);
//			$("#shuihougongzi").text(r.shuihougongzi);
//		});
//		
//		
//		function calcTax(income,yal,yl,sy,gjj){
//			//计算三险一金
//			var result = {};
//			result.yanglao = income*(yal||0);
//			result.yiliao = income*(yl||0);
//			result.shiye = income*(sy||0);
//			result.gongjijin = income*(gjj||0);
//			result.shuiqiangongzi = income-result.yanglao-
//			result.yiliao-
//			result.shiye-
//			result.gongjijin;
//			//计算个人所得税
//			var jishuigongzi = result.shuiqiangongzi-3500;
//			if(jishuigongzi<=0){
//				result.suodeshui = 0;
//			}else{
//				//需要缴税
//				if(jishuigongzi<=1500){
//					result.suodeshui = jishuigongzi*0.03;
//				}else if(jishuigongzi<=4500){
//					result.suodeshui = jishuigongzi*0.1-105;
//				}else if(jishuigongzi<=9000){
//					result.suodeshui = jishuigongzi*0.2-555;
//				}else if(jishuigongzi<=35000){
//					result.suodeshui = jishuigongzi*0.25-1005;
//				}else if(jishuigongzi<=55000){
//					result.suodeshui = jishuigongzi*0.3-2775;
//				}else if(jishuigongzi<=80000){
//					result.suodeshui = jishuigongzi*0.35-5505;
//				}else{
//					result.suodeshui = jishuigongzi*0.45-13505;
//				}
//			}
//			result.shuihougongzi = result.shuiqiangongzi-result.suodeshui;
//			
//			for (var k in result) {
//				result[k] = result[k].toFixed(2);
//			}
//			
//			return result;
//		}
		
		
		
	</script>
	
</html>
